<div>
    <div class="width-100">
        <div class="ping-chart" *ngIf="equipmentType!=='tenants'">
            <div echarts [options]="ping.echartOption" [merge]="pingChangeData" (chartInit)="onChartInit($event,ping)" style="height:250px"></div>
        </div>
        <div class="utilization-rate" *ngIf="equipmentType!=='tenants'">
            <div class="width-50">
                <div class="utilization-rate-box" echarts [options]="cpu.echartOption" [merge]="cpuChangeData" (chartInit)="onChartInit($event,cpu)"></div>
            </div>
            <div class="width-50 no-left">
                <div class="utilization-rate-box" echarts [options]="memory.echartOption" [merge]="memoryChangeData" (chartInit)="onChartInit($event,memory)"></div>
            </div>
        </div>
        <div class="width-50 tenants-pie-chart" *ngIf="equipmentType==='tenants'">
            <div class="pie-title">
                <div>{{data.data.name}} 整体统计</div>
            </div>
            <div class="pie-buttons">
                <div *ngFor="let key of legendKeys" [ngStyle]="{'border-color':legend[key].color, 'background':currentTab===key?legend[key].color:'none'}"
                    [ngClass]="currentTab===key?'active':''" (click)="switchTab(key)">{{legend[key].name}}</div>
            </div>
            <div class="pie-position">
                <div class="pie-chart-box" echarts [options]="pie.echartOption" [merge]="pieChangeData" (chartInit)="onChartInit($event,pie)"></div>
            </div>
            <div class="pie-legend">
                <i [ngStyle]="{'background':legend[currentTab].color}"></i>租户{{legend[currentTab].name}}占整体资源比例
            </div>
        </div>
        <div class="width-50 no-left tenants-line-chart" *ngIf="equipmentType==='tenants'">
            <div>
                <div class="utilization-rate-box" echarts [options]="ping.echartOption" [merge]="pingChangeData" (chartInit)="onChartInit($event,ping)"></div>
            </div>
            <div>
                <div class="utilization-rate-box" echarts [options]="cpu.echartOption" [merge]="cpuChangeData" (chartInit)="onChartInit($event,cpu)"></div>
            </div>
            <div>
                <div class="utilization-rate-box" echarts [options]="memory.echartOption" [merge]="memoryChangeData" (chartInit)="onChartInit($event,memory)"></div>
            </div>
        </div>
        <div class="clear-fix"></div>
    </div>
    <div class="width-100 no-bottom">
        <div class="equipment-info" *ngIf="equipmentType!=='tenants'">
            <div class="title">{{this.data.data.name}} 设备信息</div>
            <div [ngClass]="equipmentType" *ngFor="let column of equipmentData; let i = index">
                <div [ngStyle]="{'text-indent':i % 6===0 ? '30px' : '' }">
                    <p class="eheader">{{column.header}}</p>
                    <p title="{{column.value}}">
                        <span>{{column.value}}</span>
                    </p>
                </div>
            </div>
            <div class="clear-fix"></div>
        </div>
        <div class="disk-info" *ngIf="equipmentType!=='tenants'">
            <div class="title">服务器磁盘信息</div>
            <es-table [headers]="diskHeaders" [datas]="diskDatas">
                <ng-template let-data>
                    <es-table-column [header]="data.h" [data]="data.d" [field]="'name'">
                        <div>{{data.d.name}}</div>
                    </es-table-column>
                    <es-table-column [header]="data.h" [data]="data.d" [field]="'rate'">
                        <div>{{data.d.rate}}</div>
                    </es-table-column>
                    <es-table-column [header]="data.h" [data]="data.d" [field]="'space'">
                        <div>{{data.d.space}}</div>
                    </es-table-column>
                </ng-template>
            </es-table>
        </div>
        <div class="tenants-info" *ngIf="equipmentType==='tenants'">
            <es-table [headers]="tenantHeaders" (sortEvent)="sortEvent($event)" [datas]="tenantCloudDatas">
                <ng-template let-data>
                    <es-table-column [header]="data.h" [data]="data.d" [field]="'name'">
                        <div class="name">{{data.d.name}}</div>
                    </es-table-column>
                    <es-table-column [header]="data.h" [data]="data.d" [field]="'ip'">
                        {{data.d.ip}}
                    </es-table-column>
                    <es-table-column [header]="data.h" [data]="data.d" [field]="'cpu'">
                        <div [ngClass]="{'red-tip':isOver(data.d.cpu)}">{{data.d.cpu}}</div>
                    </es-table-column>
                    <es-table-column [header]="data.h" [data]="data.d" [field]="'network'">
                        <div [ngClass]="{'red-tip':isOver(data.d.network)}">{{data.d.network}}</div>
                    </es-table-column>
                    <es-table-column [header]="data.h" [data]="data.d" [field]="'disk'">
                        <div [ngClass]="{'red-tip':isOver(data.d.disk)}">{{data.d.disk}}</div>
                    </es-table-column>
                    <es-table-column [header]="data.h" [data]="data.d" [field]="'memory'">
                        <div [ngClass]="{'red-tip':isOver(data.d.memory)}">{{data.d.memory}}</div>
                    </es-table-column>
                    <es-table-column [header]="data.h" [data]="data.d" [field]="'os'" class="text-over-flow">{{data.d.os}}</es-table-column>
                    <es-table-column [header]="data.h" [data]="data.d" [field]="'warn'">
                        <div class="name">{{data.d.warn}}</div>
                    </es-table-column>
                </ng-template>
            </es-table>
            <div class="pagination">
                <pagination [total]='totalCount' [(nowPage)]="nowPage" [pageSize]='pageSize' (paginationEvent)="paginationChange()"></pagination>
            </div>
        </div>
    </div>
</div>